<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" ref="deviceForm" :model="queryParams">

        <el-form-item>
          <el-button v-if="checkAuthority('/equipmentm/add')" type="primary" @click="addDeviceType">新增类型</el-button>
        </el-form-item>

        <div class="searchRight">
          <el-form-item>
            <el-select v-model="queryParams.typeLevel" clearable placeholder="全部等级" @change="deviceTypeChange">
            <!-- v-for="item in deviceTypeList"
            :key="item.eqptTypeId" -->
            <el-option label="一级" value="1"></el-option>
            <el-option label="二级" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="searchCss">
            <el-input clearable placeholder="请输入设备类型名称" v-model="queryParams.typeName"></el-input>
          </el-form-item>
          <el-form-item class="searchBtn">
            <el-button v-if="checkAuthority('/select')" type="primary" @click="searchQuery">查询</el-button>
          </el-form-item>
        </div>

        <!-- <el-form-item>
          <el-button type="primary" @click="searchQuery" style="margin-left:30px;">查询</el-button>
        </el-form-item> -->
      </el-form>
    </el-card>

    <el-card class="table-card">

      <el-table :data="tableData" style="width: 100%" row-key="userNo">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="typeNumber" label="设备类型编号"></el-table-column>
        <el-table-column prop="typeLevel" label="等级"></el-table-column>
        <el-table-column prop="typeName" label="类型名称"></el-table-column>
        <el-table-column prop="typeParentName" label="上级类型">
          <!-- <template slot-scope="scope">
            {{ getLabel(scope.row.sourceFlag) }}
          </template> -->
        </el-table-column>
        <!-- <el-table-column prop="supplierName" label="供应商名称"></el-table-column> -->
        <el-table-column label="操作" width="140px">
          <template slot-scope="scope">
            <el-button v-if="checkAuthority('/equipmentm/editor')" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="checkAuthority('/equipmentm/delete')" type="text" size="small" @click="handleRemove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="tableData.length>0"
        style="text-align: right"
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="queryParams.current"
        :page-size="queryParams.pageSize"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>

    <device-category-modal v-if="dialogVisible" ref="userModal" @ok="userModalOk"></device-category-modal>
  </section>
</template>

<script>
import DeviceCategoryModal from './components/DeviceCategoryModal'
import { getDeviceTypePage, deleteDeviceType } from '@/views/children/safety/js/device'
// getEqptJudgeList
import { sourceFlag } from '@/views/children/dcenter/js/constants'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  name: 'DeviceCategory',
  components: { DeviceCategoryModal },
  data () {
    return {
      dialogVisible: false,
      currentPage: 1,
      pageSize: 10,
      totalPageNum: 0,
      judgeId: '',
      deviceTypeList: [],
      queryParams: {
        current: 1,
        pageSize: 10,
        typeLevel: '', // 类型等级
        typeName: '', // 类型名称
        typeParentId: '' // 父类型等级
      },
      tableData: [],
      sourceFlag
    }
  },

  created () {
    this.initData(this.queryParams)
    // this.getDeviceType()
  },
  methods: {
    checkAuthority,
    // 新增类型 按钮
    addDeviceType () {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.userModal.add()
      })
    },
    // 类型切换
    deviceTypeChange () {},
    // 查询按钮
    searchQuery () {
      this.queryParams.current = 1
      this.initData(this.queryParams)
    },

    // 列表数据获取
    async initData (params) {
      try {
        let { code, msg, data } = await getDeviceTypePage(params)
        if (code === 0) {
          console.log(data)
          this.tableData = data.records
          this.totalPageNum = data.total
        } else {
          this.$message.error(msg)
        }
      } catch (e) {}
    },

    // // 获取设备类型
    // async getDeviceType () {
    //   const params = {
    //     eqptLevel: '1', // 类型等级 string
    //     eqptTypeName: '', // 类型名称 string
    //     typeParentId: '' // 父类型id string
    //   }
    //   try {
    //     let { code, msg, data } = await getDeviceTypeList(params)
    //     if (code === 0) {
    //       console.log(data)
    //     } else {
    //       this.$message.error(msg)
    //     }
    //   } catch (e) {}
    // },

    // 编辑
    handleEdit (row) {
      // row.title = '编辑类型'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.userModal.edit(row)
      })
    },
    // 删除
    handleRemove (row) {
      this.orderDelete(row.typeId)
    },

    async orderDelete (ids) {
      this.$confirm('确定删除该类型吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let result = await deleteDeviceType(ids)
        if (result.code === 0) {
          this.$message.success('删除成功！')
          await this.initData(this.queryParams)
        } else {
          this.$message.error(result.msg + '删除失败！')
        }
      })
    },

    // CU弹框回调
    userModalOk () {
      this.queryParams.typeLevel = '' // 类型等级
      this.queryParams.typeName = '' // 类型名称
      this.queryParams.typeParentId = ''// 父类型等级
      this.initData(this.queryParams)
      this.$message.success('保存成功')
    },

    // 获取label
    getLabel (val) {
      return this.$base.constFormatter(sourceFlag, val)
    },

    // 页码改变
    pageHandleChange (page) {
      this.queryParams.current = page
      this.initData(this.queryParams)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .table-btn {
    margin-bottom: 15px;
  }
}
// .header-card {
//   display: flex;
// }
.no-hava {
  text-align: center;
  color: #cccccc;
}
.searchRight {
  float: right;
  right: 0;
}
</style>
